<template>
  <div>
    <el-dialog
      :visible="visible"
      :title="title"
      :width="width"
      append-to-body
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="basicData"
        :model="basicData"
        label-width="125px"
        label-position="left"
        label-suffix=":"
      >
        <div>
          <el-descriptions :model="basicData" :title="$t('BasicInformation')">
            <el-descriptions-item :label="$t('destructionLang.destructionNum')">{{ basicData.destroyNo }}</el-descriptions-item>
            <el-descriptions-item :label="$t('destructionLang.warehouseCode')">{{ basicData.depotName }}</el-descriptions-item>
            <el-descriptions-item :label="$t('destructionLang.createDate')">{{ basicData.gmtCreated }}</el-descriptions-item>
            <el-descriptions-item :label="$t('destructionLang.destructionStatus')">{{ $t("statusLang." + getTitleByValue(statusOptions, basicData.status)) }}</el-descriptions-item>
            <el-descriptions-item :label="$t('destructionLang.destructionDate')">{{ basicData.destroyTime }}</el-descriptions-item>
            <el-descriptions-item :label="$t('destructionLang.lastEditDate')">{{ basicData.gmtModified }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-form>

      <div v-if="operation !== 1">
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="$t('destructInfo')" name="destructInfo">
              <template>
                <div>
                  <el-input
                    v-model="searchQuery"
                    :placeholder="$t('pleaseEnter') + $t('goodsSKULang.skuCode') + ',' + $t('destructionLang.productName')"
                    clearable
                    style="width: 40%;margin-right: 20px"
                  />
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleSelect"
                  >{{ $t("query") }}
                  </el-button>
                </div>
                <el-table :data="filteredData" style="width: 100%" border class="mt-10">
                  <el-table-column
                    :label="$t('tableIndex')"
                    type="index"
                    align="center"
                    width="100"
                  />
                  <el-table-column
                    prop="skuCode"
                    :label="$t('destructionLang.sku')"
                    width="180"
                  />
                  <el-table-column
                    prop="goodsName"
                    :label="$t('destructionLang.productName')"
                    width="180"
                  />
                  <el-table-column
                    prop="daysAge"
                    :label="$t('destructionLang.stockAge')"
                  />
                  <el-table-column
                    prop="locationCode"
                    :label="$t('destructionLang.warehouseLocation')"
                  />
                  <el-table-column
                    prop="destroyQty"
                    :label="$t('destructionLang.destructNum')"
                  />
                  <el-table-column
                    prop="actualDestroyQty"
                    :label="$t('destructionLang.reallyDestructNum')"
                  />
                  <el-table-column
                    prop="remark"
                    :label="$t('destructionLang.remark')"
                  />
                </el-table>
              </template>
            </el-tab-pane>
            <el-tab-pane :label="$t('log')" name="record">
              <template>
                <el-table :data="basicData.operLogs" style="width: 100%" border class="mt-10">
                  <el-table-column
                    :label="$t('tableIndex')"
                    type="index"
                    align="center"
                    width="100"
                  />
                  <el-table-column
                    prop="remark"
                    :label="$t('harvestLang.modification')"
                    width="180"
                  />
                  <el-table-column
                    prop="operUserName"
                    :label="$t('goodsSKULang.operator')"
                    width="180"
                  />
                  <el-table-column
                    prop="dataBefore"
                    :label="$t('harvestLang.originalState')"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <p>
                        <span>{{ $t("statusLang." + getTitleByValue(statusOptions, parseInt(scope.row.dataBefore, 10))) }}</span>
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="dataAfter"
                    :label="$t('harvestLang.modifiedState')"
                    width="180"
                  >
                    <template slot-scope="scope">
                      <p>
                        <span>{{ $t("statusLang." + getTitleByValue(statusOptions, parseInt(scope.row.dataAfter, 10))) }}</span>
                      </p>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="operTimeInfo"
                    :label="$t('operationDate')"
                  />
                </el-table>
              </template>
            </el-tab-pane>
          </el-tabs>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { destructStatusOptionDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import { getDestructDetail } from '@/api/business/operateManage/destruct'
export default {
  name: 'DepotForm',
  props: {
    value: {
      type: Number,
      default: undefined
    },
    visible: {
      type: Boolean,
      default: undefined
    },
    operation: {
      type: Number,
      default: 0 // 0查看 1新增 2修改
    },
    title: {
      type: String,
      default: null
    },
    width: {
      type: String,
      default: '70%'
    }
  },
  data() {
    return {
      basicData: {
        destroyNo: null,
        depotName: null,
        gmtCreated: null,
        status: null,
        destroyTime: null,
        gmtModified: null
      },
      operateData: [],
      activeName: 'destructInfo',
      isVisible: false,
      statusOptions: getDictOptionList(destructStatusOptionDict),
      getTitleByValue: getTitleByValue,
      depotDataForm: {
        backType: null
      },
      searchQuery: '',
      filteredData: [], // 用于存储筛选后的数据
      rules: {
        backType: {
          required: true,
          message: this.$t('pleaseSelect'),
          trigger: 'change'
        }
      }
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async getData() {
      if (!this.value || this.operation === 1) return
      const res = await getDestructDetail({ destroyOrderOverseaId: this.value })
      if (!res || res.data === null) return
      this.basicData = res.data
      this.filteredData = this.basicData.detail
      console.log(this.basicData.detail, 'this.basicData.detail')
    },
    async handleSelect() {
      const query = this.searchQuery.trim().toLowerCase()
      this.filteredData = this.basicData.detail.filter(item => {
        return (
          item.skuCode.toLowerCase().includes(query) ||
          item.goodsName.toLowerCase().includes(query)
        )
      })
    },
    // 清空表单
    reset() {
      this.depotDataForm = {
        backType: null
      }
      this.$refs.depotDataForm.resetFields()
    },
    // 关闭
    close() {
      this.$emit('close')
      this.isVisible = false
    },
    closed() {
      this.isVisible = false
      this.reset()
    }
  }
}
</script>

<style></style>
